<template>
  <div id="sec">
    <div class="con">
      <p id="til">{{til}}</p>
      <p id="content">{{con}}</p>
    </div>
  </div>
</template>
<script>
import $ from '../../../../static/jQuery/jquery.min'
  export default {
    name:'sec',
    data(){
      return{
        til:'',
        con:''
      }
    },
    mounted(){
      this.init();
    },
    methods:{
      init:function(){
        let self=this;
        let xhr=new XMLHttpRequest();
        xhr.onreadystatechange=function(res){
          if(xhr.readyState===4&&xhr.status===200){
            var json=JSON.parse(xhr.responseText);
            self.til=json.title;
            self.con=json.content;
          }
        };
        xhr.open('get',"https://www.easy-mock.com/mock/5a61b18441d8910ea886ec89/example/content",true);
        xhr.send(null);
      }
    }
  }

</script>

<style scoped>
  .con{
    width:90%;
    height:auto;
    background-color: #fff8d8;
    margin:0 auto;
  }
#til{
  text-align: center;
}
</style>
